<template>
  <!-- 不堆叠 -->
  <div id="lineChart" :style="{ height: '242px' }"></div>
</template>

<script>
import * as echarts from "echarts"
export default {
  name: 'eCharts',
  data() {
    return {
      value: 60,
    }
  },
  mounted() {
    this.showChart()
  },
  methods: {
    showChart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('lineChart'))

      var value = 200 //当前进度
      var maxValue = 300 //进度条最大值
      var option = {
        title: {
          text: '2021折线图分析分析分析分析',
          textStyle: {
            fontFamily: 'Microsoft YaHei',
            fontSize: 14,
            fontWeight: 'normal',
            color: '#666666',
          },
          left: '-5',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: (params) => {
            console.log('params', params)

            // // 获取xAxis data中的数据
            let dataStr = `<div>
                            <p style="font-size:14px;font-weight:bold;color:#333;margin:0 0px 10px;">
                              ${params[0].name}XX总数 ? 个</p>
                        </div>`
            params.forEach((item) => {
              // 获取图标(小圆点)颜色，并且自定义样式为正方形，即要改变小圆点，只需重写marker的html片段，并修改样式即可
              // 获取series中data
              // 获取seriersName
              console.log('item', item)
              dataStr += `<div>
                <div style="font-size:14px; color:#666; margin-top:10px;">
                  <span style="display:inline-block;margin-right:0px;width:8px;height:8px;border-radius:4px;background-color:${item.color};"></span>
                  <span style="margin-right:5px;">${item.seriesName}</span>
                  <span>${item.data}个</span>
                </div>
              </div>`
            })
            return dataStr
          },
        },
        // 修改图示 图标 - 圆角矩形
        legend: {
          itemHeight: 4,
          itemWidth: 12,
          data: [
            {
              name: '折线图1',
              icon: 'roundRect',
            },
            {
              name: '折线图2',
              icon: 'roundRect',
            },
          ],
          left: '200', // 距离左边
        },
        grid: {
          left: '3%',
          right: '2%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisTick: {
            show: false, //是否显示刻度线 默认为true
            alignWithLabel: true,
          },
          axisLabel: {
            show: true, //这里的show用于设置是否显示x轴下的字体 默认为true
            interval: 0, //可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
            textStyle: {
              //textStyle里面写x轴下的字体的样式
              color: '#999',
              fontSize: 14,
            },
          },
          axisLine: {
            onZero: true, // 显示0刻度
            lineStyle: {
              //lineStyle里面写x轴那一条线的样式
              color: '#E6E6E6',
              width: 1, //轴线的粗细
            },
          },
        },
        yAxis: {
          name: '工单数',
          nameTextStyle: {
            padding: [0, 0, 0, -50], // 四个数字分别为上右下左与原位置距离
          },
          splitLine: {
            show: true,
            // 背景虚线
            lineStyle: {
              type: [4, 5],
              dashOffset: 5,
            },
          },
          //用于设置y轴的字体
          axisLabel: {
            show: true, //这里的show用于设置是否显示y轴下的字体 默认为true
            textStyle: {
              //textStyle里面写y轴下的字体的样式
              color: '#999',
              fontSize: 12,
            },
          },
        },
        series: [
          {
            name: '折线图1',
            type: 'line',
            //如果不想折线那么尖锐，可以加上smooth: true变为柔和曲线
            //smooth: true,
            //stack: '总量',
            symbolSize: 7, // 拐点大小
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(239,232,8, .4)',
                },
                {
                  offset: 1,
                  color: 'rgba(255,255,255, .1)',
                },
              ]),
            },
            itemStyle: {
              normal: {
                color: '#5393E7', //改变折线点的颜色
                lineStyle: {
                  width: 2, //折线宽度
                  color: '#5393E7', //改变折线颜色
                },
              },
              emphasis: {
                color: '#5393E7',
                lineStyle: {
                  width: 2,
                  color: '#5393E7',
                },
                borderColor: '#5393E7', //拐点边框颜色
                borderWidth: 6, //拐点边框大小
              },
            },
            data: [120, 132, 300, 134, 90, 230, 210, 120, 132, 101, 134, 90],
            zlevel: 11,
          },
          {
            name: '折线图2',
            type: 'line',
            //smooth: true,
            //如果想要y轴的数值不相加，就要去掉stack参数。否则数值就会相加。
            //stack: '总量',
            symbolSize: 7,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(239,232,8, .4)',
                },
                {
                  offset: 1,
                  color: 'rgba(255,255,255, .1)',
                },
              ]),
            },
            itemStyle: {
              normal: {
                color: '#F3912E',
                lineStyle: {
                  width: 2,
                  color: '#F3912E',
                },
              },
              emphasis: {
                color: '#F3912E',
                lineStyle: {
                  width: 2,
                  color: '#F3912E',
                },
                borderColor: '#F3912E',
                borderWidth: 6,
              },
            },
            data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290],
            zlevel: 11,
          },
        ],
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      //随着浏览器窗口大小改变而改变
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
  },
}
</script>
